<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/jquery.min.js"></script>
</head>

<body>
    <div id="container" style="display:none;opacity: 0;"></div>
    <canvas class="canvas"></canvas>

    <!-- 卡片 -->
    <div class="show_info animated" style="display:none;">
        <div class="info_my">
            <img src="assets/img/user.jpg" />
            <div class="info_mem">
                <div id="name">小明</div>
                <div>职位
                    <span id="title"></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var is_show_info = 1;
        var hFont;
        /*** html节点字体大小随屏幕大小改变 ***/
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    hFont = 20 * (clientWidth / 320);
                    docEl.style.fontSize = hFont + 'px';
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        function senddh() {
            $('.canvas').show();
            $('.canvas,#container').css('opacity', '1');
        }
        window.AvatarNum = 30;
        setTimeout(() => {
            senddh();
        }, 1000);
    </script>

    <script src="assets/js/2d.js"></script>
    <script>
        var personArray = [];
        var CurPersonNum = 0;
        // animate
        var _in = ['bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'slideInDown', 'slideInLeft', 'slideInRight'];
        var _out = ['bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp', 'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'slideOutDown', 'slideOutLeft', 'slideOutRight'];

        // 模拟推送数据
        var s = setInterval(function () {
            var person = {
                "id": "001",
                "name": "小明",
                "avatar": "assets/img/user.jpg",
                "title": "项目经理"
            };
            if (personArray.length < 30) {
                personArray.push(person);
                // get animate
                var rand_in = parseInt(Math.random() * _in.length, 10);
                var rand_out = parseInt(Math.random() * _out.length, 10);
                if (CurPersonNum >= personArray.length) {
                    CurPersonNum = 0;
                }
                // 更改展示的图片
                var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0];
                img.setAttribute('src', person.avatar);
                $('.show_info').show();
                $('.show_info').addClass(_in[rand_in]);
                $('.show_info').removeClass(_in[rand_in]);
                document.getElementById("name").innerHTML = person.name;
                document.getElementById("title").innerHTML = person.title;
                ++CurPersonNum;
                setTimeout(function () {
                    $('.show_info').addClass(_out[rand_out]);
                    setTimeout(function () {
                        $('.show_info').removeClass(_out[rand_out]);
                        $('.show_info').hide();
                    }, 1000);
                }, 1500);
            }
        }, 4500);

        S.Drawing.init('.canvas');
        /* 默认图片列表 */
        var placeholder_image_arr = ["assets\/img\/default-avatar.jpg"];
        var placeholder_image_cnt = placeholder_image_arr.length;
        var placeholder_image_index = 0;
        var default_placeholder_image = placeholder_image_arr[0];

        var edit_personArray = new Array;
        var placeholder_image = default_placeholder_image;
        var table = new Array;

        var l = personArray.length;
        for (var i = 0; i < 160; i++) {
            table[i] = new Object();

            if (l > 0) {
                table[i] = personArray[i % l];
                table[i].src = personArray[i % l].avatar;
            } else {
                if (placeholder_image_cnt > 0) {
                    if (placeholder_image_index >= placeholder_image_cnt) {
                        placeholder_image_index = 0;
                    }
                    placeholder_image = placeholder_image_arr[placeholder_image_index];
                    placeholder_image_index++;
                }
                table[i].src = placeholder_image;
            }
            table[i].p_x = i % 20 + 1;
            table[i].p_y = Math.floor(i / 20) + 1;
        }

        //打乱数组顺序
        table = table.sort(function () { return Math.random() });
        /* 动画墙显示 屏 列表 */
        //var signwall_show_str = "米波网络|#sphere|#torus|#helix";
        var signwall_show_str = "塔米智能|#sphere|hello|#torus|#helix";
        /* 动画墙 切换时间？做什么用？ */
        var show_interval = "0"; // 间隔时间
        var return_array = new Array();
        function getArrayItems(arr, num) {
            //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
            var temp_array = new Array();
            for (var index in arr) {
                temp_array.push(arr[index]);
            }
            //取出的数值项,保存在此数组
            for (var i = 0; i < num; i++) {
                //判断如果数组还有可以取出的元素,以防下标越界
                if (temp_array.length > 0) {
                    //在数组中产生一个随机索引
                    var arrIndex = Math.floor(Math.random() * temp_array.length);
                    //将此随机索引的对应的数组元素值复制出来
                    return_array[i] = temp_array[arrIndex];
                    //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                    temp_array.splice(arrIndex, 1);
                } else {
                    //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                    return false;
                }
            }
            return return_array;
        }
        getArrayItems(personArray, window.AvatarNum);
        window.onload = function () {
            S.init();
            S.UI.simulate(signwall_show_str);
        }
        var return_array = new Array();
        function getArrayItems(arr, num) {
            //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
            var temp_array = new Array();
            for (var index in arr) {
                temp_array.push(arr[index]);
            }
            //取出的数值项,保存在此数组
            for (var i = 0; i < num; i++) {
                //判断如果数组还有可以取出的元素,以防下标越界
                if (temp_array.length > 0) {
                    //在数组中产生一个随机索引
                    var arrIndex = Math.floor(Math.random() * temp_array.length);
                    //将此随机索引的对应的数组元素值复制出来
                    return_array[i] = temp_array[arrIndex];
                    //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                    temp_array.splice(arrIndex, 1);
                } else {
                    //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                    return false;
                }
            }
            return return_array;
        }
        getArrayItems(personArray, window.AvatarNum);
        window.onload = function () {
            S.init();
            S.UI.simulate(signwall_show_str);
        }

        setInterval(function () {
            getArrayItems(personArray, window.AvatarNum);
        }, 10 * 1000);
    </script>

    <script src="assets/js/three.js"></script>
    <script src="assets/js/tween.min.js"></script>
    <script src="assets/js/TrackballControls.js"></script>
    <script src="assets/js/CSS3DRenderer.js"></script>
    <script src="assets/js/3d.js"></script>
    <script>
        init();
        animate();
        transform(targets.table, 2000, 'table', 10);
    </script>

</body>

</html>